<div class="dialog" role="dialog">
  <h1>{{i18n "dialog.preferences.project.title"}}: {{projectDirectory}}</h1>
  <form action="" method="GET" id="dialog">
    <!-- Transmit the project's hash as well. -->
    <input type="hidden" name="projectHash" value="{{hash}}">
    <div class="modal-tab-container">
      <div class="tab-list" role="tablist">
        <button class="tab-list-tab" role="tab" aria-selected="false"
          aria-controls="prefs-tabs-general" id="prefs-tabs-general-control">
          {{i18n "dialog.preferences.pdf.metadata"}}
        </button>
        <button class="tab-list-tab" role="tab" aria-selected="false"
          aria-controls="prefs-tabs-page" id="prefs-tabs-page-control">
          {{i18n "dialog.preferences.pdf.page"}}
        </button>
        <button class="tab-list-tab" role="tab" aria-selected="false"
          aria-controls="prefs-tabs-font" id="prefs-tabs-font-control">
          {{i18n "dialog.preferences.pdf.font"}}
        </button>
      </div>


      <!-- Metadata for PDF files -->
      <div id="prefs-tabs-general" role="tabpanel">
        <p>{{i18n "dialog.preferences.pdf.metadata_intro"}}</p>
        <div class="box-container">
          <div class="box-left">
            <label
              for="title">{{i18n "dialog.preferences.project.title_label"}}</label>
            <input type="text" name="title" id="title" value="{{title}}"
              placeholder="{{i18n "dialog.preferences.project.title_label"}}">
            <label
              for="pdf.author">{{i18n "dialog.preferences.pdf.author_label"}}</label>
            <input type="text" name="pdf.author" id="pdf.author"
              value="{{pdf.author}}"
              placeholder="{{i18n "dialog.preferences.pdf.author"}}">
            <label
              for="pdf.keywords">{{i18n "dialog.preferences.pdf.keywords_label"}}</label>
            <input type="text" name="pdf.keywords" if="pdf.keywords"
              value="{{pdf.keywords}}"
              placeholder="{{i18n "dialog.preferences.pdf.keywords"}}">
            <hr>
            <label for="textpl">{{i18n "dialog.preferences.pdf.textpl"}}</label>
            <div class="input-button-group">
              <input type="text" name="pdf.textpl" id="textpl"
                value="{{pdf.textpl}}">
              <button type="button" class="request-file"
                data-tippy-content="{{i18n "dialog.preferences.choose_file"}}"
                data-request-name="TeX Template File" data-request-ext="tex"
                data-request-target="#textpl">
                <clr-icon shape="file"></clr-icon>
              </button>
            </div>
          </div>
          <div class="box-right">
            <label class="cb-toggle">
              <input type="checkbox" value="yes" name="pdf.titlepage"
                id="pdf.titlepage" {{#if pdf.titlepage}}checked="checked"
                {{/if}}>
              <div class="toggle"></div>
            </label>
            <label
              for="pdf.titlepage">{{i18n "dialog.preferences.pdf.titlepage_label"}}</label>
            <div class="clearfix"></div>
            <label class="cb-toggle">
              <input type="checkbox" value="yes" name="pdf.toc" id="pdf.toc"
                {{#if pdf.toc}}checked="checked" {{/if}}>
              <div class="toggle"></div>
            </label>
            <label
              for="pdf.toc">{{i18n "dialog.preferences.pdf.toc_label"}}</label>
            <select name="pdf.tocDepth">
              <option value="1"
                {{#ifCond pdf.tocDepth '=' 1}}selected="selected" {{/ifCond}}>1
              </option>
              <option value="2"
                {{#ifCond pdf.tocDepth '=' 2}}selected="selected" {{/ifCond}}>2
              </option>
              <option value="3"
                {{#ifCond pdf.tocDepth '=' 3}}selected="selected" {{/ifCond}}>3
              </option>
              <option value="4"
                {{#ifCond pdf.tocDepth '=' 4}}selected="selected" {{/ifCond}}>4
              </option>
              <option value="5"
                {{#ifCond pdf.tocDepth '=' 5}}selected="selected" {{/ifCond}}>5
              </option>
              <option value="6"
                {{#ifCond pdf.tocDepth '=' 6}}selected="selected" {{/ifCond}}>6
              </option>
            </select>
            <hr>
            <label
              for="format">{{i18n "dialog.preferences.project.format"}}</label>
            <select name="format">
              {{#each availableExportFormats}}
                <option value="{{this}}"
                  {{#ifCond this '=' ../format}}selected="selected" {{/ifCond}}>
                  {{this}}</option>
              {{/each}}
            </select>
            <hr>
            <label
              for="cslStyle">{{i18n "dialog.preferences.project.csl_style"}}</label>
            <div class="input-button-group">
              <input type="text" name="cslStyle" id="cslStyle"
                value="{{cslStyle}}">
              <button type="button" class="request-file"
                data-tippy-content="{{i18n "dialog.preferences.choose_file"}}"
                data-request-name="Citation Style Language File"
                data-request-ext="csl" data-request-target="#cslStyle">
                <clr-icon shape="file"></clr-icon>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Page layout -->
      <div id="prefs-tabs-page" role="tabpanel">
        <p>{{i18n "dialog.preferences.pdf.page_intro"}}</p>
        <hr>
        <div class="box-container">
          <div class="box-left">
            <div class="paper a4paper">
              <input class="tmargin" type="number" min="0" max="9999" step="0.1"
                name="pdf.tmargin" id="pdf.tmargin" value="{{pdf.tmargin}}"
                placeholder="{{i18n "dialog.preferences.pdf.tmargin"}}"
                data-tippy-content="{{i18n "dialog.preferences.pdf.tmargin_label"}}">
              <input class="rmargin" type="number" min="0" max="9999" step="0.1"
                name="pdf.rmargin" id="pdf.rmargin" value="{{pdf.rmargin}}"
                placeholder="{{i18n "dialog.preferences.pdf.rmargin"}}"
                data-tippy-content="{{i18n "dialog.preferences.pdf.rmargin_label"}}">
              <input class="bmargin" type="number" min="0" max="9999" step="0.1"
                name="pdf.bmargin" id="pdf.bmargin" value="{{pdf.bmargin}}"
                placeholder="{{i18n "dialog.preferences.pdf.bmargin"}}"
                data-tippy-content="{{i18n "dialog.preferences.pdf.bmargin_label"}}">
              <input class="lmargin" type="number" min="0" max="9999" step="0.1"
                name="pdf.lmargin" id="pdf.lmargin" value="{{pdf.lmargin}}"
                placeholder="{{i18n "dialog.preferences.pdf.lmargin"}}"
                data-tippy-content="{{i18n "dialog.preferences.pdf.lmargin_label"}}">
            </div>
          </div>
          <div class="box-right">
            <label
              for="pdf.margin_unit">{{i18n "dialog.preferences.pdf.unit_label"}}</label>
            <select name="pdf.margin_unit" id="pdf.margin_unit">
              {{#each availableMarginUnits}}
                <option value="{{this}}"
                  {{#ifCond this '=' ../pdf.margin_unit}}selected="selected"
                  {{/ifCond}}>{{this}}</option>
              {{/each}}
            </select>
            <hr>
            <label
              for="pdf.papertype">{{i18n "dialog.preferences.pdf.papertype"}}</label>
            <select name="pdf.papertype">
              {{#each supportedPapertypes}}
                <option value="{{this}}"
                  {{#ifCond this '=' ../pdf.papertype}}selected="selected"
                  {{/ifCond}}>{{this}}</option>
              {{/each}}
            </select>
            <hr>
            <label
              for="pdf.pagenumbering">{{i18n "dialog.preferences.pdf.pagenumbering_label"}}</label>
            <select name="pdf.pagenumbering">
              {{#each availablePageNumberingSystems}}
                <option value="{{this}}"
                  {{#ifCond this '=' ../pdf.pagenumbering}}selected="selected"
                  {{/ifCond}}>
                  {{i18n "dialog.preferences.pdf.pagenumbering_" this }}
                </option>
              {{/each}}
            </select>
          </div>
        </div>
      </div>

      <!-- Font options -->
      <div id="prefs-tabs-font" role="tabpanel">
        <p>{{i18n "dialog.preferences.pdf.font_intro"}}</p>
        <div class="box-container">
          <div class="box-left">
            <label
              for="pdf.mainfont">{{i18n "dialog.preferences.pdf.mainfont_label"}}</label>
            <input type="text" name="pdf.mainfont" id="mainfont"
              value="{{pdf.mainfont}}"
              placeholder="{{i18n "dialog.preferences.pdf.mainfont"}}">
            <label
              for="pdf.sansfont">{{i18n "dialog.preferences.pdf.sansfont_label"}}</label>
            <input type="text" name="pdf.sansfont" id="sansfont"
              value="{{pdf.sansfont}}"
              placeholder="{{i18n "dialog.preferences.pdf.sansfont"}}">
            <label
              for="pdf.fontsize">{{i18n "dialog.preferences.pdf.fontsize_label"}}</label>
            <input type="number" min="0" max="10000" step="1"
              name="pdf.fontsize" id="fontsize" value="{{pdf.fontsize}}"
              placeholder="{{i18n "dialog.preferences.pdf.fontsize"}}">
            <label
              for="pdf.lineheight">{{i18n "dialog.preferences.pdf.lineheight_label"}}</label>
            <input type="number" min="0" max="1000" step="1"
              name="pdf.lineheight" id="lineheight" value="{{pdf.lineheight}}"
              placeholder="{{i18n "dialog.preferences.pdf.lineheight"}}">
          </div>
          <div class="box-right">
            <!-- This is the preview tab. It shows how everything will look afterwards. -->
            <h1 class="pdf-preview">Lorem Ipsum Dolor</h1>
            <p class="pdf-preview">
              Lorem ipsum dolor sit amet, consectetur adipisici elit,
              sed eiusmod tempor incidunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud
              exercitation ullamco laboris nisi ut aliquid ex ea
              commodi consequat. Quis aute iure reprehenderit in
              voluptate velit esse cillum dolore eu fugiat nulla
              pariatur. Excepteur sint obcaecat cupiditat non proident,
              sunt in culpa qui officia deserunt mollit anim id est
              laborum.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div>
      <button type="submit"
        id="pref-save">{{i18n "dialog.button.save"}}</button>
      <button id="abort">{{i18n "dialog.button.cancel"}}</button>
      <span class="error-info"></span>
    </div>
  </form>
</div>
